<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/myinfo.css">
    <script src="js/common.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/afterLogin.js"></script>

</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/default.jpg" alt="">
        <a class="title" href="blog_list.html">博客系统</a>
        <!-- 用来占据中间位置 -->
        <span class="spacer" style="width: 59%;"></span>
        <a href="javascript:myIndex()">我的主页</a>
        <a href="myinfo.html">个人资料</a>
        <a href="blog_add.html">写博客</a>
        <a href="javascript:mydraft()">我的草稿</a>
        <a href="private_letter.html">好友</a>
        <a href="javascript:logout()">注销</a>
    </div>
    <!-- 版心 -->
    <div class="login-container">
        <div class="login-dialog">
            <h3>个人资料</h3>
            <div class="dialog">
                <a href="javascript:updatePhoto()" class="head-img">
                    <img id="photo" src="" class="avtar" alt="" style="margin-left: 80px;">
                </a>
                <!-- 上传头像 -->
                <form method="POST" enctype="multipart/form-data" id="forminfo">
                    <input type="file" id="choose-photo" name="myphoto" value="上传头像" accept="image/*">
                    <input type="submit" id="sub-photo">
                </form>
                <div>
                    <div class="row">
                        <span style="width: 50px">账号：</span>
                        <span style="text-align: center;" id="username"></span>
                    </div>
                    <div id="ps" style="text-align: left;margin-bottom: 13px;">Ps：点击头像即可修改</div>
                </div>
            </div>

            <!-- 基本信息 -->
            <div class="row">
                <span style="width: 70px; ">昵称</span>
                <input type="text" id="nickname" style="width: 160px;">
                <button id="submit" onclick="updateNickname()" style="width: 70px; height: 40px;">提交</button>
            </div>

            <div class="row">
                <span style="width: 70px; ">gitee</span>
                <input type="text" id="gitee" style="width: 160px;">
                <button id="submit" onclick="updateGitee()" style="width: 70px; height: 40px;">提交</button>
            </div>

            <hr>
            <div class="row">
                <span id="ps" style="height: 35px;">Ps：以下为密保信息，输入密码后才可进行修改!</span>
            </div>
            <div class="row">
                <span style="width: 70px; margin-left: 30px;">密码</span>
                <input style="width: 160px; margin-right: 100px;" type="password" id="password">
            </div>
            <div class="row">
                <span style="width: 70px; ">真实姓名</span>
                <input type="text" id="realname" style="width: 160px;">
                <button id="submit" onclick="updateRealName()" style="width: 70px; height: 40px;">提交</button>
            </div>
            <div class="row">
                <span style="width: 70px; ">身份证号</span>
                <input type="text" id="idcard" style="width: 160px;">
                <button id="submit" onclick="updateIdCard()" style="width: 70px; height: 40px;">提交</button>
            </div>

            <hr>

            <div class="row">
                <span id="ps" style="height: 35px;">Ps：若想修改密码请先输入旧密码!</span>
            </div>
            <div class="row">
                <span>旧密码</span>
                <input type="password" id="password1">
            </div>
            <div class="row">
                <span>新密码</span>
                <input type="password" id="password2">
            </div>
            <div class="row">
                <span>确认密码</span>
                <input type="password" id="password3">
            </div>
            <div class="row">
                <button id="submit" onclick="updatePassword()" style="margin-top: 15px;">修改密码</button>
            </div>
        </div>
    </div>

    <script>

        //隐藏修改头像和提交控件
        jQuery("#choose-photo").hide();
        jQuery("#sub-photo").hide();
        //修改头像
        function updatePhoto() {
            //点击头像，就会弹出文件选择框
            jQuery("#choose-photo").click();
            //当 #choose-photo 内容改变时触发
            jQuery("#choose-photo").change(function () {
                // //点击 submit 提交表单
                var fd = new FormData(document.querySelector("#forminfo"));
                fd.append("myphoto", jQuery("#choose-photo").val());
                jQuery.ajax({
                    type: "POST",
                    url: "/user/subphoto",
                    data: fd,
                    // 想让文件传输格式为 form 表单设置的格式，那么就必须设置以下两个属性
                    contentType: false,
                    processData: false,
                    success: function (result) {
                        if (result != null && result.code == 200) {
                            //刷新网页
                            alert("头像修改成功!");
                            location.href = location.href;
                        } else {
                            alert("头像上传失败，请稍后重试！");
                        }
                    }
                });

            });
        }

        // 获取当前用户全部信息
        function getAllUserInfo() {
            jQuery.ajax({
                type: "GET",
                url: "/user/info",
                data: {},
                async: false,
                success: function (result) {
                    if (result != null && result.code == 200) {
                        //头像
                        jQuery("#photo").attr("src", result.data.photo);
                        //基本信息
                        jQuery("#username").text(result.data.username);
                        jQuery("#nickname").val(result.data.nickname);
                    } else {
                        alert("用户信息获取失败!");
                    }
                }
            });
        }
        getAllUserInfo();

        //修改昵称
        function updateNickname() {
            var nickname = jQuery("#nickname");
            // 非空校验
            if (nickname.val() == "") {
                alert("昵称不能为空!");
                nickname.focus();
                return;
            }
            jQuery.ajax({
                type: "POST",
                url: "/user/update-nickname",
                data: {
                    "nickname": nickname.val()
                },
                success: function (result) {
                    if (result != null && result.code == 200 && result.data == 1) {
                        alert("昵称修改成功!");
                    } else {
                        
                        alert("昵称修改失败，请稍后重试!");
                    }
                    
                }
            });
        }

        //修改 gitee 地址
        function updateGitee() {
            jQuery.ajax({
                type: "POST",
                url: "/user/update-gitee",
                data: {
                    "gitee": jQuery("#gitee").val()
                },
                success: function(result) {
                    if(result != null && result.code == 200 && result.data == 1) {
                        alert("gitee地址修改成功!");
                    } else {
                        alert("gitee地址修改失败，请重试!");
                    }
                }
            });
        }

        //修改真实姓名
        function updateRealName() {
            //非空校验
            var realname = jQuery("#realname");
            if (realname.val() == "") {
                alert("真实姓名不能为空!");
                realname.focus();
                return;
            }
            //首先要检验密码是否正确
            var password = jQuery("#password");
            if (password.val() == "") {
                alert("密码不能为空!");
                password.focus();
                return;
            }
            if (checkOldPassword(password)) {
                //密码正确，开始修改资料
                jQuery.ajax({
                    type: "POST",
                    url: "/user/update-realname",
                    data: {
                        "realname": realname.val(),
                    },
                    success: function (result) {
                        if (result != null && result.code == 200 && result.data == 1) {
                            alert("真实姓名修改成功!");
                        } else {
                            alert("真实姓名修改失败，请稍后重试!");
                        }
                    }
                });
            } else {
                alert("密码错误，信息修改失败!");
            }
        }

        //修改身份证号
        function updateIdCard() {
            //非空校验
            var idcard = jQuery("#idcard");
            if (idcard.val() == "") {
                alert("身份证号不能为空!");
                idcard.focus();
                return;
            }
            //验证密码是否正确
            var password = jQuery("#password");
            if (password.val() == "") {
                alert("密码不能为空!");
                password.focus();
                return;
            }
            if (checkOldPassword(password)) {
                //密码正确，开始修改资料
                jQuery.ajax({
                    type: "POST",
                    url: "/user/update-idcard",
                    data: {
                        "idcard": idcard.val()
                    },
                    success: function (result) {
                        if (result != null && result.code == 200 && result.data == 1) {
                            alert("身份证修改成功!");
                        } else {
                            alert("身份证修改失败，请稍后重试!");
                        }
                    }
                });
            } else {
                alert("密码错误，信息修改失败!");
            }

        }

        //修改密码
        function updatePassword() {
            //分别获取，进行非空校验
            var password1 = jQuery("#password1");
            if (password1.val() == "") {
                alert("旧密码不能为空!");
                password1.focus();
                return
            }
            var password2 = jQuery("#password2");
            if (password2.val() == "") {
                alert("新密码不能为空!");
                password2.focus();
                return
            }
            var password3 = jQuery("#password3");
            if (password3.val() == "") {
                alert("确认密码不能为空!");
                password3.focus();
                return
            }
            //校验确认密码
            if (password2.val() != password3.val()) {
                alert("新密码与确认密码不一致，请重试!");
                password2.focus();
                return;
            }

            //判断旧密码是否正确
            if (checkOldPassword(password1)) {
                //旧密码正确，进行修改密码
                jQuery.ajax({
                    type: "POST",
                    url: "/user/update-password",
                    async: false,
                    data: {
                        "password": password2.val()
                    },
                    success: function (result) {
                        if (result != null && result.code == 200) {
                            alert("密码修改成功!");
                        } else {
                            alert("密码修改失败，请稍后重试！");
                        }
                    }
                });
            } else {
                alert("旧密码错误，请重新输入!");
                password1.focus();
            }
        }

        //判断旧密码是否正确
        function checkOldPassword(password1) {
            var flag = false
            jQuery.ajax({
                type: "POST",
                url: "/user/check-password",
                async: false,
                data: {
                    "password": password1.val()
                },
                success: function (result) {
                    if (result != null && result.code == 200 && result.data == 1) {
                        flag = true;
                    }
                }
            });
            //退出 ajax 后，这里一定要写返回值，因为 ajax 中的返回不代表 整个函数的返回值
            return flag;
        }




    </script>

</body>

</html>